<!DOCTYPE html>
<html>
<head>
    <title>Melody Demo</title>
</head>
<body>
    <form id="form">
        <input type="text" id="message" autocomplete="off" />
        <button>发送</button>
    </form>
    <ul id="messages"></ul>

    <script>
        const ws = new WebSocket("ws://localhost:8080/ws");
        const form = document.getElementById('form');
        const input = document.getElementById('message');
        const messages = document.getElementById('messages');
        
        ws.onmessage = function(event) {
            const li = document.createElement('li');
            li.textContent = event.data;
            messages.appendChild(li);
        };
        
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            if (input.value) {
                ws.send(input.value);
                input.value = '';
            }
        });
    </script>
</body>
</html>